<template>
	<view class="enterprice-item-box">
		<view class="enterprice-item-left">
			<view class="image-slice" v-if="imageUrl.length<= 4 &&imageUrl.length!=0">
				<view class="sliceText">
					{{ imgSliceFn(imageUrl).slice(0,2) }}
				</view>
				<view class="sliceText">
					{{ imgSliceFn(imageUrl).slice(-2) }}
				</view>
			</view>
			<img :src="imgComp(imageUrl)" alt="" v-else class="enterprice-left-image" />
		</view>
		<view class="enterprice-item-right">
			<view class="enterprice-title">
				<view @click="getperson">{{ title }}</view>
				<view class="icon-tab" v-if="talentTags.length > 0">
					<view :class="item.name" :key="item" v-for="item in talentTags"></view>
				</view>
			</view>
			<view class="enterprice-list">
				<view class="enterprice-tab" v-for="(item, index) in list" :key="index + 'enterprice'">{{ item }}
				</view>
			</view>
			<view class="info-box">
				<view class="info-box-time">{{ time }}</view>
				<view class="info-box-person" v-if="person"> {{ person }}</view>
			</view>
			<view class="enterprice-btton-box" v-if="iconList.length > 0">
				<view class="enterprice-icon-box" :style="{ backgroundColor: bgColor }"
					v-for="(item, index) in iconList" :key="index + 'icon'" @click="getEnterprice(item.name)">
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		onMounted
	} from "vue";
	const emit = defineEmits(["getEnterpriceID","getpersonID"]);
	const props = defineProps({
		imageUrl: {
			type: String,
			default: "",
		},
		bgColor: {
			type: String,
			default: "#FFFFFF",
		},
		id: {
			type: String,
			default: "1930383",
		},
		title: {
			type: String,
			default: "王明飞",
		},
		list: {
			type: Array,
			default: ["小微企业", "高新技术", "市级专精特新"],
		},
		time: {
			type: String,
			default: "",
		},
		person: {
			type: String,
			default: "",
		},
		iconList: {
			type: Array,
			default: [],
		},
		enterpriseType: {
			type: String,
			default: ''
		},
		talentTags: {
			type: Array,
			default: () => new Array(),
		},
	});

	function getEnterprice(data) {
		emit("getEnterpriceID", {
			name: data,
			id: props.id,
			title:props.title,
			enterpriseType: props.enterpriseType
		});
	}
	function getperson(){
		emit("getpersonID",{id:props.id,name:props.title});
	}

	const imgSliceFn = (img) =>{
		return img
	}
	const imgComp = (img) =>{
		if(img.length===0){
			return "/static/image/hutai.png"
		}else{
			return img
		};
	}
</script>

<style lang="less" scoped>
	.enterprice-item-box {
		width: 96vw;
		display: flex;
		border-bottom: 1rpx solid #dadada;
		padding: 30rpx 0;

		&:last-of-type {
			border-bottom: 0rpx solid #dadada;
		}

		.enterprice-item-left {
			width: 60rpx;
			margin-right: 30rpx;
			.image-slice{
				background-color: #5590f6;
				border-radius: 6rpx;
				.sliceText{
					font-size: 24rpx;
					font-weight: 400;
					text-align: center;
					white-space: nowrap;
					color: #fff;
				}
			}
			.enterprice-left-image {
				width: 55rpx;
				height: 55rpx;
			}
		}

		.enterprice-item-right {
			flex: 1;

			.enterprice-title {
				display: flex;
				font-size: 31.3rpx;
				justify-content: space-between;
				font-family: "ali-m";

				.icon-tab {
					width: 50vw;
					display: flex;
					justify-content: flex-end;
					padding-right: 30rpx;

					.badgeone {
						width: 47rpx;
						height: 47rpx;
						background: @mutual-assistance-badgeone-img no-repeat center center;
						background-size: 100% 100%;
					}

					.badgetwo {
						width: 47rpx;
						height: 47rpx;
						background: @mutual-assistance-badgetwo-img no-repeat center center;
						background-size: 100% 100%;
					}

					.badgethree {
						width: 47rpx;
						height: 47rpx;
						background: @mutual-assistance-badgethree-img no-repeat center center;
						background-size: 100% 100%;
					}

					.badgefour {
						width: 47rpx;
						height: 47rpx;
						background: @mutual-assistance-badgefour-img no-repeat center center;
						background-size: 100% 100%;
					}
				}
			}

			.enterprice-list {
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;
				margin: 30rpx 0 10rpx 0;
				width: 100%;

				.enterprice-tab {
					margin-right: 30rpx;
					color: #5590f6;
					// border: 0.1px solid #5590f6;
					background-color: #F4F5FA;
					padding: 5px;
					font-size: 19rpx;
					margin-bottom: 10rpx;
				}
			}

			.info-box {
				color: #9b9b9b;
				display: flex;
				// justify-content: space-between;
				font-size: 24rpx;
				text-overflow: ellipsis;
				white-space: nowrap;

				.info-box-time {
					padding-right: 0.6rem;
				}
			}

			.enterprice-btton-box {
				display: flex;
				margin-top: 0.5rem;
				justify-content: flex-start;
				width: 100%;
				color: #9b9b9b;
				font-size: 24rpx;

				.enterprice-icon-box {
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
